<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper-3.3.1.jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css" />
		<style type="text/css">
			.mui-bar-tab~.mui-content{padding: 0;}
		</style>
	</head>

	<body>
		<header class="search-nav on-blur mui-bar mui-bar-nav">
			<div class="search-box-cover"></div>
			<div class="search-box">
				<a class="mui-icon iconfont icon-z-code"></a>
				<a class="mui-icon iconfont icon-xiaoxi mui-pull-right"></a>
				<div class="searchbar_head">
					<div class="searchBox">
						<i class="iconfont icon-sousuo" href=""></i>
						<input type="text" placeholder="搜索商品" class="search-txt" />
					</div>
				</div>
			</div>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="index.html">
				<span class="mui-icon iconfont icon-shouye"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="category.html">
				<span class="mui-icon iconfont icon-icon04"></span>
				<span class="mui-tab-label">分类</span>
			</a>
			<a class="mui-tab-item" href="cart.html">
				<span class="mui-icon iconfont icon-gouwuche"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item" href="member_index.html">
				<span class="mui-icon iconfont icon-wode"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<div id="slider" class="mui-slider">
			<div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="images/temp/banner05.jpg">
					</a>
				</div>
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="images/temp/banner01.jpg">
					</a>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="images/temp/banner02.jpg">
					</a>
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="images/temp/banner03.jpg">
					</a>
				</div>
				<!-- 第四张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="images/temp/banner04.jpg">
					</a>
				</div>
				<!-- 第5张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="images/temp/banner05.jpg">
					</a>
				</div>
				<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="images/temp/banner01.jpg">
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<div class="mui-content">
			<div class="index-nav">
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-sm-3">
						<a href="#">
							<img src="images/nav_cate.png">
							<div class="mui-media-body">商品分类</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-sm-3">
						<a href="#">
							<img src="images/nav_shop.png">
							<div class="mui-media-body">附近门店</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-sm-3">
						<a href="#">
							<img src="images/nav_shouhou.png">
							<div class="mui-media-body">申请售后</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-sm-3">
						<a href="#">
							<img src="images/nav_phone.png">
							<div class="mui-media-body">三九客服</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-sm-3">
						<a href="#">
							<img src="images/nav_huishou.png">
							<div class="mui-media-body">以旧换新</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-sm-3">
						<a href="#">
							<img src="images/tiemo.png">
							<div class="mui-media-body">免费贴膜</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-sm-3">
						<a href="#">
							<img src="images/nav_zixun.png">
							<div class="mui-media-body">三九资讯</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-sm-3">
						<a href="#">
							<img src="images/nav_recharge.png">
							<div class="mui-media-body">话费充值</div>
						</a>
					</li>
				</ul>
			</div>
			<!--文字滚动-->
			<dl class="notice hot-news-roller border_bottom">
				<dt>
   			 	<img width="65" height="40" src="images/sjtt.png">
   			 </dt>
				<dd class="notice-roller" id="newsRoller">
					<ul>
						<li>
							<a href="">醉了，iPhone一天要秒安卓八百次</a>
						</li>
						<li>
							<a href="">小米5卖肾也要买，真机曝光信息太牛X</a>
						</li>
						<li>
							<a href="">年末检验智商的时候来啦，这些传言信过多少</a>
						</li>
						<li>
							<a href="">终于来了，小米5大曝光！</a>
						</li>
						<li>
							<a href="">谁是最划算的千元机，不行撕撕看</a>
						</li>
						<li>
							<a href="">教科书式的好评，魅族教友商做手机</a>
						</li>
						<li>
							<a href="">iPad的完美替代品，小米平板2评测</a>
						</li>
						<li>
							<a href="">买手机不求人，教你一分钟看懂手机参数</a>
						</li>
						<li>
							<a href="">民族旗舰 华为Mate8主观体验报告</a>
						</li>
						<li>
							<a href="">虽然这手机有点短命，但不妨碍它大卖</a>
						</li>
					</ul>
				</dd>
			</dl>

			<!--今日爆款-->
			<div class="baokuan floor">
				<h3><i style="background:#f44623"></i>今日爆款<a href="">特价自拍杆 <s class="arrow_r"></s></a></h3>
				<div class="bk-slide">
					<div class="swiper-wrapper">
						<a href="" class="swiper-slide"><img src="images/index/20151209180539_0929.jpg" /></a>
						<a href="" class="swiper-slide"><img src="images/index/20151203142830_9764.jpg" /></a>
						<a href="" class="swiper-slide"><img src="images/index/20151125172404_2356.jpg" /></a>
						<a href="" class="swiper-slide"><img src="images/index/20151125172411_9069.jpg" /></a>
						<a href="" class="swiper-slide"><img src="images/index/20151125172358_2969.jpg" /></a>
					</div>
				</div>
			</div>
			<script>
				var baokuan = new Swiper('.bk-slide', {
					slidesPerView: 3,
					slidesPerColumn: 1,
					freeMode: true,
					spaceBetween: 10,
				});
			</script>
			<nav class="pic-nav flex">
				<div class="flex-item">
					<a href="goods_detail.html"><img src="images/index/20151205115552_8098.jpg" /></a>
				</div>
				<div class="flex-item">
					<a href="goods_detail.html"><img src="images/index/20151204113830_6480.jpg" /></a>
					<a href="goods_detail.html"><img src="images/index/20151210085508_4292.jpg" /></a>
				</div>
				<div class="flex-item">
					<a href="goods_detail.html"><img src="images/index/20151127145216_9351.jpg" /></a>
					<a href="goods_detail.html"><img src="images/index/20151119144218_9335.jpg" /></a>
				</div>
			</nav>
			<!--今日爆款-end-->
			<!--好货推荐-->
			<div class="floor">
				<h3><i style="background:#c44cde"></i>好货推荐</h3>
				<ul>
					<li>
						<div class="aditem">
							<a href=""><img src="images/index/20151209163811_7000.jpg"></a>
						</div>
						<div class="aditem">
							<a href=""><img src="images/index/20151210184213_1472.jpg"></a>
						</div>
					</li>
					<li>
						<div class="aditem">
							<a href=""><img src="images/index/20151205115917_7912.jpg"></a>
						</div>
						<div class="aditem">
							<a href=""><img src="images/index/20151208101058_4434.jpg"></a>
						</div>
					</li>
				</ul>
			</div>
			<!--好货推荐-end-->

			<!--为你优选-->
			<div class="floor">
				<h3><i></i>为你优选</h3>
				<ul>
					<li>
						<div class="aditem">
							<a href=""><img src="images/index/20151209085336_0258.jpg"></a>
						</div>
					</li>
					<li>
						<div class="aditem">
							<a href=""><img src="images/index/20151209103459_4729.jpg"></a>
						</div>
						<div class="aditem">
							<a href="" class="two"><img src="images/index/20151123180151_8449.jpg"></a>
							<a href="" class="two"><img src="images/index/20151208175356_8887.jpg"></a>
						</div>
					</li>
				</ul>
			</div>
			<!--为你优选-end-->

			<!--总有惊喜-->
			<div class="floor">
				<h3><i style="background: #f4a425;"></i>总有惊喜</h3>
				<ul>
					<li>
						<div class="aditem">
							<a href=""><img src="images/index/20151209180853_2772.jpg"></a>
						</div>
						<div class="aditem">
							<a href="" class="two"><img src="images/index/20150909114520_6343.jpg"></a>
							<a href="" class="two"><img src="images/index/20151109092835_9026.jpg"></a>
						</div>
					</li>
					<li>
						<div class="aditem">
							<a href=""><img src="images/index/20151208110028_6058.jpg"></a>
						</div>
					</li>
				</ul>
			</div>
			<!--总有惊喜-end-->

			<!--热门直通车-->
			<div class="floor">
				<h3><i style="background: #1dccaa;"></i>总有惊喜</h3>
				<ul>
					<li>
						<div class="aditem">
							<a href=""><img src="images/index/20150910165223_4481.jpg"></a>
						</div>
						<div class="aditem">
							<a href=""><img src="images/index/20151023181009_1163.jpg"></a>
						</div>
						<div class="aditem">
							<a href=""><img src="images/index/20150910165241_2361.jpg"></a>
						</div>
						<div class="aditem">
							<a href=""><img src="images/index/20151203165053_3643.jpg"></a>
						</div>
					</li>
					<li>
						<div class="aditem">
							<a href=""><img src="images/index/20150910164636_2161.jpg"></a>
						</div>
						<div class="aditem">
							<a href=""><img src="images/index/20150910164644_5701.jpg"></a>
						</div>
						<div class="aditem">
							<a href=""><img src="images/index/20150910183034_4405.jpg"></a>
						</div>
						<div class="aditem">
							<a href=""><img src="images/index/20150910165138_6182.jpg"></a>
						</div>
					</li>
				</ul>
			</div>
			<!--热门直通车-end-->
			<!--猜你喜欢-->
			<div class="floor guessulike">
				<h3><i style="background:#f36713;"></i>猜你喜欢</h3>
				<div class="pj_box">
					<ul>
						<li>
							<a href=""><img src="images/index/20150910052509882.jpg" width="80" height="80" alt="img"><em>iPhone 6s（A1700）国行版</em><b>￥4788.00</b></a>
						</li>
						<li>
							<a href=""><img src="images/index/20150910052509882.jpg" width="80" height="80" alt="img"><em>iPhone 6s（A1700）国行版</em><b>￥4788.00</b></a>
						</li>
						<li>
							<a href=""><img src="images/index/20150910052509882.jpg" width="80" height="80" alt="img"><em>iPhone 6s（A1700）国行版</em><b>￥4788.00</b></a>
						</li>
						<li>
							<a href=""><img src="images/index/20150910052509882.jpg" width="80" height="80" alt="img"><em>iPhone 6s（A1700）国行版</em><b>￥4788.00</b></a>
						</li>
						<li>
							<a href=""><img src="images/index/20150910052509882.jpg" width="80" height="80" alt="img"><em>iPhone 6s（A1700）国行版</em><b>￥4788.00</b></a>
						</li>
						<li>
							<a href=""><img src="images/index/20150910052509882.jpg" width="80" height="80" alt="img"><em>iPhone 6s（A1700）国行版</em><b>￥4788.00</b></a>
						</li>
					</ul>
				</div>
			</div>

			<!--猜你喜欢-end-->

		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});

			mui('body').on('tap', 'a', function() {
				document.location.href = this.href;
			});

			var gallery = mui("#slider");
			gallery.slider({
				interval: 500 //自动轮播周期，若为0则不自动播放，默认为0；
			});

			//顶部滚动一定距离透明背景变化
			$(window).scroll(function() {
				if($(document).scrollTop() < 20) {
					$(".on-blur .search-box-cover").css("opacity", "0");
				} else if($(document).scrollTop() > 21 && $(document).scrollTop() < 120) {
					$(".on-blur .search-box-cover").css("opacity", "0.5");
					console.log(".on-blur .search-box-cover");
				} else {
					$(".on-blur .search-box-cover").css("opacity", "0.8");
				}

			});

			//文字滚动
			function AutoScroll(obj) {
				$(obj).find("ul:first").animate({
					marginTop: "-32px"
				}, 500, function() {
					$(this).css({
						marginTop: "0px"
					}).find("li:first").appendTo(this);
				});
			}
			$(document).ready(function() {
				setInterval('AutoScroll("#newsRoller")', 3000);
			});
		</script>
	</body>

</html>